@font-face {
  font-family: 'iconfont';  /* project id 382649 */
  src: url('//at.alicdn.com/t/font_382649_bre9unopou323xr.eot');
  src: url('//at.alicdn.com/t/font_382649_bre9unopou323xr.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_382649_bre9unopou323xr.woff') format('woff'),
  url('//at.alicdn.com/t/font_382649_bre9unopou323xr.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_382649_bre9unopou323xr.svg#iconfont') format('svg');
}
.px2rem(@name,@px){
    @{name}: @px / 75px * 1rem 
}
body{
    background: #f4f4f4;
    
}
.iconfont{
    font-family:"iconfont";
    .px2rem(font-size,40);
    font-style:normal;
    
}
.header{
    .px2rem(font-size,30);
    background: white;
    width: 100%;
    .px2rem(height,90);
    box-sizing: border-box;
    padding: 1%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 99;
    position: fixed;
    left: 0;
    top: 0;
    border-bottom: 2px solid #f1f1f1;
    padding: 2%;
    
    p:nth-child(1){
        .px2rem(font-size,20);
        .iconfont{
            font-family:"iconfont";
            .px2rem(font-size,50);
            font-style:normal;
        } 
        i{
            .px2rem(margin-right,40);
        }
    }
    p:nth-child(2){
        .px2rem(font-size,40);
        font-weight: 500;
    }
}
.main{
    z-index: 60;
    .px2rem(margin-top,90);
    .px2rem(margin-bottom,120);
    .my_liquan{
        width: 100%;
        background: white;
        border-bottom: 1px solid #f1f1f1;
        padding: 4%;
        box-sizing: border-box;
        .px2rem(font-size,30);
        .px2rem(line-height,60);
        a{
            i{
                display: block;
            }
            
            i:nth-child(1){
                float: left;
                margin-left: 3%;
            }
            i:nth-child(2){
                float: right;
            }
        }
        
    }
    .my_liquan:nth-child(4){
        a{
            label{
                float: right;
                .mui-switch {
  
                  width: 60px;
                  height: 28px;
                  position: relative;
                  border: 1px solid #dfdfdf;
                  background-color: #fdfdfd;
                  box-shadow: #dfdfdf 0 0 0 0 inset;
                  border-radius: 20px;
                  border-top-left-radius: 20px;
                  border-top-right-radius: 20px;
                  border-bottom-left-radius: 20px;
                  border-bottom-right-radius: 20px;
                  background-clip: content-box;
                  display: inline-block;
                  -webkit-appearance: none;
                  user-select: none;
                  outline: none; }
                  .mui-switch:before {
                    content: '';
                    width: 40px;
                    height: 40px;
                    position: absolute;
                    top: -6px;
                    left: 0;
                    border-radius: 20px;
                    border-top-left-radius: 20px;
                    border-top-right-radius: 20px;
                    border-bottom-left-radius: 20px;
                    border-bottom-right-radius: 20px;
                    background-color: #ff5552;
                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
                  .mui-switch:checked {
                    border-color: #ffcfce;
                    box-shadow: #ffcfce 0 0 0 16px inset;
                    background-color: #ffcfce; }
                    .mui-switch:checked:before {
                      left: 21px; }
            }
        }
    }
}

